<template>
	<view class="app-components-pay-list">
		<template v-if="foldList">
			<view class="app-components-pay-list__item e-flex e-flex-between" v-for="(item, index) in payModes1" :key="item.id" @tap="payModeConfirm(item)">
				<view class="e-flex">
					<view class="e-m-r-20">
						<load-image :size="['48rpx']" :src="item.icon"></load-image>
					</view>
					<text class="e-font-30">{{ item.name }}</text>
				</view>
				<radio v-if="showRadio" :color="AppSkin.primary" :checked="payItem?.id === item.id" @tap.stop="payModeConfirm(item)" />
			</view>
			<fold upText="common.payFoldOpen" v-if="payModes2.length">
				<view class="app-components-pay-list__item e-flex e-flex-between" v-for="(item, index) in payModes2" :key="item.id" @tap="payModeConfirm(item)">
					<view class="e-flex">
						<view class="e-m-r-20">
							<load-image :size="['48rpx']" :src="item.icon"></load-image>
						</view>
						<text class="e-font-30">{{ item.name }}</text>
					</view>
					<radio v-if="showRadio" :color="AppSkin.primary" :checked="payItem?.id === item.id" @tap.stop="payModeConfirm(item)" />
				</view>
			</fold>
		</template>
		<template v-else>
			<view class="app-components-pay-list__item e-flex e-flex-between" v-for="(item, index) in payMode" :key="item.id" @tap="payModeConfirm(item)">
				<view class="e-flex">
					<view class="e-m-r-20">
						<load-image :size="['48rpx']" :src="item.icon"></load-image>
					</view>
					<text class="e-font-30">{{ item.name }}</text>
				</view>
				<radio v-if="showRadio" :color="AppSkin.primary" :checked="payItem?.id === item.id" @tap.stop="payModeConfirm(item)" />
			</view>
		</template>
		
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'pay-list'
});
</script>

<script setup lang="ts">
import { ref,computed, watch } from 'vue';
import { getPaymode } from '@/common/request/api';
import type { PaymodeItem } from '@/common/request/api';
import { DEFAULT_ACCOUN_SHOW, PAYTYPE } from '@/env';
import { useUser, useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	// 是否可以使用余额支付
	isDefault: {
		type: String,
		default: 'Y'
	},
	// 是否为视频号带货
	isTrace: {
		type: Boolean,
		default: false
	},
	// 是否可以使用系统支付方式
	isSystem: {
		type: Boolean,
		default: true
	},
	// 是否只使用微信、支付宝，paypal等手机支付
	isMobilePay: {
		type: Boolean,
		default: false
	},
	// 商品id集，逗号分割
	proIds: String,
	showRadio:{
		type: Boolean,
		default: true
	},
	foldList:{
		type: Boolean,
		default: true
	},
	// 不展示的支付方式，列表形式，为支付方式的strategy合集
	hiddenStrategys:Array,
	storeType:{
		type: [String,Number],
		default: 1
	},
	hasDFK:{
		type:Boolean,
		default:false
	}
});

const emits = defineEmits(['pay']);

const ctx = useCurrentInstance();

const { userInfo } = storeToRefs(useUser());
const { AppSkin } = storeToRefs(useInit());

const payTypes = PAYTYPE.split(',');
const payMode = ref<PaymodeItem[]>([]);


const payModes1 = computed(() => {
	if (props.foldList&&payMode.value.length) {
		return payMode.value.slice(0, 3);
	}
	return []
});
const payModes2 = computed(() => {
	if (props.foldList&&payMode.value.length > 3) {
		return payMode.value.slice(3, payMode.value.length);
	}
	return []
});
const getPaymodeList = () => {
	let data: Parameters<typeof getPaymode>[0] = {
		doType: '1',
		payType: PAYTYPE,
		proIds: props.proIds,
		fromType: getApp().globalData?.payFromType,
		type:props.storeType
	};
	if (props.isDefault === 'N' || !DEFAULT_ACCOUN_SHOW) {
		data['isDefault'] = 'N';
	}
	if (props.isSystem) {
		data.payType = [...payTypes, 'SYS'].join(',');
	}
	// 视频号带货只允许使用微信支付
	if (props.isTrace) {
		data.payType = 'WX';
	}
	if (props.isMobilePay) {
		data.payType = 'WX,SAND,YABAND,STRIPE,ZL';
		// #ifdef APP-PLUS || HTML5 || PREVIEW
		data.payType = data.payType + ',ZFB';
		// #endif
		data.type = undefined
	}
	if (props.hasDFK) {
		data.payType=data.payType+',DFK'
	}
	getPaymode(data).then((res) => {
		if(props.hiddenStrategys){
			payMode.value = res.data.filter(item => {
				return !props.hiddenStrategys.includes(item.strategy)
			});
		}else{
			payMode.value = res.data;
		}
		
	});
};

watch(() => props.storeType,(newValue,oldValue) => {
	
	if(newValue&&Number(newValue) !== Number(oldValue)){
		getPaymodeList();
	}
})
watch(() => props.proIds,() => {
	
	getPaymodeList();
})


getPaymodeList();
watch(
	() => props.isTrace,
	() => {
		getPaymodeList();
	}
);
const payItem = ref<PaymodeItem>()
const payModeConfirm = (item: PaymodeItem) => {
	payItem.value = item.id === payItem.value?.id ? undefined: item
	uni.setStorageSync('subPayType', payItem.value ? item.subPayType :'');
	if(payItem.value){
		if (item.type === 'SYS') {
			if (!userInfo.value.isPayword) {
				ctx.$goTo('/pages/public/setting/pay-pwd', {
					type: 1
				});
				return;
			}
		}
		emits('pay', item.id, item.type, item.name, item.isDefault);
	}
	
};

defineExpose({
	payMode,
	payModeConfirm,
	getPaymodeList,
	payItem
});
</script>

<style scoped lang="scss">
@include appBem_b(components-pay-list) {
	@include appBem_e(item) {
		padding: 20rpx;
		margin-bottom: 10rpx;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>